<!-- 底部导航栏 -->
<template>
	<view>
		<u-tabbar :value="index" @change="handleChange" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true" :inactiveColor="variables.commonContentTextColor" :activeColor="variables.commonColor">
			<u-tabbar-item :class="'tabbar-item_'+idx" :text="item.text" v-for="(item, idx) in tabbarData" :key="idx" :dot="item.isDot" :badge="(item.count>0?item.count:null)">
				<view :class="(idx==2?'flex align-items-center justify-center ':'')+'active tabbar-item_'+idx" slot="active-icon">
					<image mode="heightFix" style="height: 48rpx;width: auto;" :src="item.selectedIconPath"></image>
				</view>
				<view :class="(idx==2?'flex align-items-center justify-center ':'')+'inactive tabbar-item_'+idx" slot="inactive-icon">
					<image mode="heightFix" style="height: 48rpx;width: auto;" :src="item.iconPath"></image>
				</view>
				
			</u-tabbar-item>
		</u-tabbar>
	</view>	
</template>

<script>
	import tabbarData from "@/mixins/tabbarData";
	import variables from "@/uni.scss"
	export default {
		mixins: [tabbarData],
		props: {
			index: {
				type: Number,
				default: 0
			},
		},
		data(){
			return {
				variables: variables,
				
			};
		},
		methods: {
			// 切换选项时触发
			handleChange(val) {
				console.log("handleChange=", val)
				console.log("handleChange=", this.tabbarData[val])
				this.$emit('change', val, this.tabbarData[val]);
				// if (val == 1) {
				// 	uni.showToast({
				// 		title: '点击扫码',
				// 		icon: 'none'
				// 	})
				// } else{
				// 	uni.reLaunch({
				// 		url: this.tabbarData[val].pagePath
				// 	});
				// }
			}
		},
		mounted() {
			
			// uni.hideTabBar();
		}
	}
</script>

<style lang="scss" scoped>
	.tabbar-item_2 {
		background-color: #fff;
		width: 150rpx;
		height: 150rpx;
		text-align: center;
		border-radius: 50%;
		// position: absolute;
		// left: calc(50% - 60rpx);
		// top: -10rpx;
		z-index: 999;
		box-shadow: 0 0 8px rgba(231, 226, 226, 0.3);
		&:active{box-shadow: none;}
		image{height: 40% !important;width: 40% !important;}
	}
</style>
